<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="../js/jquery.js"></script>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="../bootstrap/js/bootstrap.min.js"></script>
<!--[if lte IE 9]>
<script src="../bootstrap/js/respond.min.js"></script>
<script src="../bootstrap/js/html5shiv.min.js"></script>
<![endif]-->
<script src="../js/py.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/lhgdialog.js?self=true&skin=iblack"></script>
<script type="text/javascript" src="../js/pca.js"></script>
<!--  script type="text/javascript" src="../js/gd_area.js"></script-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=WfN0WpVVCejGMcmSQspWUL8h"></script>
<title>百度地图</title>
<style type="text/css">
body, html {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
}

#allmap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
}

.main {
	width: 98%;
	margin-left: 1%;
	margin-right: 1%;
	margin-top: 3px;
}

.sp__ {
	margin-top: 3px;
}
</style>
</head>
<body>
	<div class="main">
		<input type="hidden" id="map_type"> <input type="hidden" id="address_v_flag" value="1">
		<button id="f_helper" class="hide"></button>
		<div class="row">
			<div class="col-md-5">
				<select id="pr_selector" class="form-control" style="width: 125px; display: inline-block; margin-left: 10px;" autofocus="autofocus">
					<option>选择省份</option>
				</select> <select class="form-control" id="city_selector" style="width: 125px; display: inline-block; margin-left: 10px;">
					<option>选择城市</option>
				</select> <select class="form-control" id="area_selector" style="width: 150px; display: inline-block; margin-left: 10px;">
					<option>选择地区</option>
				</select>
			</div>
			<div class="col-md-7">
				<div class="input-group">
					<input id="t_address" placeholder="地图位置地址" class="form-control"> <input type="hidden" id="address"> <input type="hidden" id="position"><input
						type="hidden" id="pr"><input type="hidden" id="city"><input type="hidden" id="area">
					<div id="result1" name="result1" style="overflow: auto; width: 95%; border: 1px solid gray; display: none;"></div>
					<span class="input-group-btn">
						<button class="btn  btn-primary" type="button" onclick="getAddress_();">确认地址</button>
					</span>
				</div>
			</div>
		</div>
	</div>
	<div class="sp__"></div>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	var map;
	//加载地图
	function initMap() {
		// 百度地图API功能
		map = new BMap.Map("allmap"); // 创建Map实例
		var point = new BMap.Point(106.556666, 29.562584); // 创建点坐标
		map.centerAndZoom(point, 17); // 初始化地图,设置中心点坐标和地图级别。
		map.enableScrollWheelZoom(); //启用滚轮放大缩小
		map.addControl(new BMap.NavigationControl());
		//绑定点击获取地址事件
		map.addEventListener("click", function(e) {
			var pt = e.point;
			new BMap.Geocoder().getLocation(pt, getAddress);
			$("#address_v_flag").val(1);
		});
		var ac = new BMap.Autocomplete( //建立一个自动完成的对象
		{
			"input" : "t_address",
			"location" : map
		});
		ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
			var str = "";
			var _value = e.fromitem.value;
			var value = "";
			if (e.fromitem.index > -1) {
				value = _value.province + _value.city + _value.district + _value.street + _value.business;
			}
			str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

			value = "";
			if (e.toitem.index > -1) {
				_value = e.toitem.value;
				value = _value.province + _value.city + _value.district + _value.street + _value.business;
			}
			str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
			G("result1").innerHTML = str;
		});

		var myValue = undefined;
		ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
			var _value = e.item.value;
			myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
			G("result1").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
			setPlace();
		});
		function G(id) {
			return document.getElementById(id);
		}
		function setPlace() {
			map.clearOverlays(); //清除地图上所有覆盖物
			function myFun() {
				var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
				new BMap.Geocoder().getLocation(pp, getAddress);
				$("#address_v_flag").val(1);
				map.centerAndZoom(pp, 17);
				map.addOverlay(new BMap.Marker(pp)); //添加标注
			}
			var local = new BMap.LocalSearch(map, { //智能搜索
				onSearchComplete : myFun
			});
			local.search(myValue);
		}

	}
	//获取地址回调
	function getAddress(rs) {
		//TODO  console.log(rs) 此处可获取周边信息
		var marker = new BMap.Marker(rs.point);
		map.clearOverlays();
		map.addOverlay(marker); // 将标注添加到地图中
		//marker.setAnimation(BMAP_ANIMATION_BOUNCE);
		$("#address").val(rs.address);
		$("#pr").val(rs.addressComponents.province);
		$("#city").val(rs.addressComponents.city);
		$("#area").val(rs.addressComponents.district);
		$("#position").val("(" + rs.point.lng + "," + rs.point.lat + ")");
		$.dialog.tips(rs.address, 3);
		//alert("你选择了地点： " + rs.address + " 经纬度：(" + rs.point.lng + ","	+ rs.point.lat + ")");
		//$("#t_address").val(rs.address);
	}
	function getAddress_() {
		var api = frameElement.api;
		var add = $("#t_address").val() + "(" + $("#address").val() + ")";
		var position = $("#position").val();
		var type = $("#map_type").val();
		if (position.trim().length == 0) {
			$.dialog.tips(type == 1 ? "请选择出险地点" : "请选择查勘地点", 3);
			return;
		}
		add = add.trim().length == 0 ? undefined : add;
		if (add) {
			fill(type);
		}
		api.close();
	}
	//原型继承实现replaceAll
	String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) {
		if (!RegExp.prototype.isPrototypeOf(reallyDo)) {
			return this.replace(new RegExp(reallyDo, (ignoreCase ? "gi" : "g")), replaceWith);
		} else {
			return this.replace(reallyDo, replaceWith);
		}
	}
	function fill(type) {
		var api = frameElement.api;
		var W = api.opener;
		var add = $("#t_address").val() + "(" + $("#address").val() + ")";
		var position = $("#position").val();
		var pca = $("#pr").val() + "," + $("#city").val() + "," + $("#area").val();
		var address_v_flag = $("#address_v_flag").val();
		add = address_v_flag == 1 ? add : pca.replaceAll(",", "") + "(" + $("#t_address").val() + ")";
		if (type == 1) {
			//更新出现地点信息
			$(W.document.getElementById("cxdd")).val(add);
			$(W.document.getElementById("cxdd")).removeClass('error');
			$(W.document.getElementById("cxdd_")).val(position);
			$(W.document.getElementById("cxdd_pca")).val(pca);
			$(W.document.getElementById("cxdd_v_flag")).val(address_v_flag);

		}
		//更改查看地点信息
		$(W.document.getElementById("ckdd")).val(add);
		$(W.document.getElementById("ckdd")).removeClass('error');
		$(W.document.getElementById("ckdd_")).val(position);
		$(W.document.getElementById("ckdd_pca")).val(pca);
		$(W.document.getElementById("ckdd_v_flag")).val(address_v_flag);
	}
	//根据地址加载地图
	function loadMapByAddress(address, pr_city) {
		var myGeo = new BMap.Geocoder();
		myGeo.getPoint(address, function(point) {
			if (point) {
				map.centerAndZoom(point, 16);
				new BMap.Geocoder().getLocation(point, getAddress);
				$("#address_v_flag").val(0);
				map.addOverlay(new BMap.Marker(point));
			}
		}, pr_city);
	}
	//默认加载全部省份
	function loadAllProvince() {
		var prs = getProvinces();
		var infoPanel = $("#pr_selector");
		infoPanel.empty();
		infoPanel.append("<option class='prs_info'>选择省份</option>");
		$(prs).each(function(i, item) {
			infoPanel.append("<option class='prs_info'>" + item.name + "</option>");
		});
	}
	//根据按键加载省份
	function showProvinceByKey(c) {
		if (!c) {
			return;
		}
		var prs = getProvinces(c);
		var infoPanel = $("#pr_selector");
		infoPanel.empty();
		infoPanel.append("<option class='prs_info'>选择省份</option>");
		$(prs).each(function(i, item) {
			infoPanel.append("<option class='prs_info'>" + item.name + "</option>");
		});
		if (prs.length == 1) {
			$("#pr_selector").children()[1].selected = true;
		} else {
			$("#pr_selector").children()[1].selected = true;
		}
		showCitys();
	}
	//获取省份信息
	function getPrs(c) {
		var target = [];
		var prs = getAllPrs();
		for (index in prs) {
			var info = CC2PY(prs[index]).substring(0, 1);
			if (prs[index] == "重庆") {
				info = "C";
			}
			if (info.toLowerCase() == c || info == c) {
				target.push(prs[index]);
			}
		}
		return target;
	}
	//省份切换效果 加载省份下的城市
	function showCitys() {
		var pr = $("#pr_selector").val();
		var citys = getCitys(pr);
		var cityPanel = $("#city_selector");
		cityPanel.empty();
		cityPanel.append("<option>选择城市</option>");
		$(citys).each(function(i, item) {
			cityPanel.append("<option>" + item.name + "</option>");
		});
		if (citys.length == 1) {
			$("#city_selector").children()[1].selected = true;
		} else {
			$("#city_selector").children()[1].selected = true;
		}
		showAreas();//自动级联加载地区
	}
	//加载地区 根据省市选择情况加载地区信息
	function showAreas() {
		var pr = $("#pr_selector").val();
		var city = $("#city_selector").val();
		var areaPanel = $("#area_selector");
		areaPanel.empty();
		areaPanel.append("<option>选择城市</option>");
		var areas_ = getAreas(pr, city);
		$.each(areas_, function(i, item) {
			areaPanel.append("<option>" + item.DisName + "</option>");
		});
		if (areas_.length == 1) {
			$("#area_selector").children()[1].selected = true;
		} else {
			$("#area_selector").children()[1].selected = true;
		}
		var selectInfo = getSelectInfo();
		$("#t_address").val(selectInfo.add);
		loadMapByAddress(selectInfo.add, selectInfo.pc);
	}
	//加载地区地图
	function loadAreaMap() {
		var selectInfo = getSelectInfo();
		$("#t_address").val(selectInfo.add);
		loadMapByAddress(selectInfo.add, selectInfo.pc);
	}
	function getSelectInfo() {
		var target = {};
		var pr = $("#pr_selector").val();
		var city = $("#city_selector").val();
		var area = $("#area_selector").val();
		var add;
		var pc;
		if (city == pr) {
			pc = city;
			add = pr + area;
		} else {
			pc = pr + city;
			add = pr + city + area;
		}
		target.pc = pc;
		target.add = add;
		return target;
	}
	//键盘对应
	function decode(code) {
		switch (code) {
		case 65:
			return "A";
		case 66:
			return "B";
		case 67:
			return "C";
		case 70:
			return "F";
		case 71:
			return "G";
		case 72:
			return "H";
		case 74:
			return "J";
		case 76:
			return "L";
		case 78:
			return "N";
		case 81:
			return "Q";
		case 83:
			return "S";
		case 84:
			return "T";
		case 88:
			return "X";
		case 89:
			return "Y";
		case 90:
			return "Z";
		default:
			return undefined;
		}
	}
	//开启键盘效果
	function keyboardOn(e) {
		e = (e) ? e : window.event;
		var code = e.keyCode;
		if (code) {
			showProvinceByKey(decode(code));
		}
	}
	//关闭键盘效果
	function keyboardOff(e) {
	}
	$(function() {
		initMap();//初始化地图
		loadAllProvince();//加载全部省份
		$("#pr_selector").on('change', showCitys);//绑定省份切换效果
		$("#city_selector").on('change', showAreas);//绑定省份切换效果
		$("#area_selector").on('change', loadAreaMap);//绑定省份切换效果
		window.document.onkeydown = keyboardOn;//开启键盘监控
		$("input").on('focus', function() {
			window.document.onkeydown = keyboardOff;//输入框获取焦点关闭键盘监控
		});
		$("input").on('blur', function() {
			window.document.onkeydown = keyboardOn;//输入框失去焦点开启键盘监控
		});
		/*$("select").on('focus', function() {
			window.document.onkeydown = keyboardOff;//下拉框获取焦点关闭键盘监控
		});
		$("select").on('blur', function() {
			window.document.onkeydown = keyboardOn;//下拉框失去焦点开启键盘监控
		});*/
	});
</script>
